<template>
<div>
    <div class="config">
        <div class="item" v-for="(tempI,index) in 8" :key="index">
            <div class="header center between">
                <div class="input-wrap">
                    <label>键号</label>
                    <el-select size="mini" class="input-item" v-model.number="config.keyArr[index]">
                        <el-option v-for="i in codeArr" :key="i" :label="i" :value="i"></el-option>
                    </el-select>
                </div>
                <div class="input-wrap">
                    <div class="input-wrap">
                        <label>模式</label>
                        <el-select size="mini" class="input-item" v-model.number="config.modeArr[index]">
                            <el-option v-for="i in switchDict" :key="i.label" :label="i.label" :value="i.value"></el-option>
                        </el-select>
                    </div>
                    <div class="input-wrap" v-if="switchDict.map(j=>j.value).indexOf(config.modeArr[index]) === switchDict.length - 1">
                        <label>时间</label>
                        <el-input class="input-item" size="mini" v-model.number="config.holdArr[index]"></el-input>
                        秒
                    </div>
                </div>
            </div>
            <div class="mid center" v-if="lightArr">
                <span style="width:70px;padding:0 .5rem;">控制灯光</span>
                <div class="expand flex">
                    <template v-for="(i,ind) in 8">
                        <Light v-model="lightArr[index][ind]" :key="i" :index="ind" @toggleLight="toggleLight">
                        </Light>
                    </template>
                </div>
            </div>
            <div class="mid center" v-if="ledArr">
                <span style="width:70px;padding:0 .5rem;">控制LED</span>
                <div class="expand flex">
                    <template v-for="(i,ind) in 8">
                        <Light v-model="ledArr[index][ind]" :key="i" :index="ind" @toggleLight="toggleLight">
                        </Light>
                    </template>
                </div>
            </div>
            <div class="mid center" v-if="relayArr">
                <span style="width:70px;padding:0 .5rem;">继电器</span>
                <div class="expand flex">
                    <template v-for="(i,ind) in 4">
                        <Light v-model="relayArr[index][ind]" :key="i" :index="ind" @toggleLight="toggleLight">
                        </Light>
                    </template>
                </div>
            </div>
            <div class="bot center between">
                <div class="input-wrap">
                    <label>关联键号</label>
                    <el-select size="mini" class="input-item" v-model.number="config.relaLiArr[index]">
                        <el-option v-for="i in codeArr" :key="i" :label="i" :value="i"></el-option>
                    </el-select>
                </div>
                <div class="input-wrap">
                    <label>关联ID</label>
                    <el-input class="input-item" size="mini" v-model="config.idArr[index]"></el-input>
                </div>
            </div>
        </div>
    </div>
    <div class="two">
        <div class="header column">
            <span style="background:#846FFA;"></span>
            <span v-for="(i,index) in 8" :key="index">灯光{{i}}</span>
        </div>
        <div v-for="(i,index) in 8" :key="index" class="column">
            <span v-if="index===0">LED1</span>
            <span v-if="index===1">LED2</span>
            <span v-if="index===2">LED3</span>
            <span v-if="index===3">LED4</span>
            <span v-if="index===4">LED5</span>
            <span v-if="index===5">LED6</span>
            <span v-if="index===6">LED7</span>
            <span v-if="index===7">LED8</span>
            <span v-if="index===8">继电器1</span>
            <span v-if="index===9">继电器2</span>
            <span v-if="index===10">继电器3</span>
            <span v-if="index===11">继电器4</span>
            <span v-for="(j,inde) in ledArr" :key="inde">
                <el-checkbox v-model="ledArr[index][inde]" class="check" true-label="1" false-label="0" @change="flatArr"></el-checkbox>
            </span>
        </div>
        <div v-for="(i,index2) in 4" :key="index2+8" class="column">
            <span v-if="index2===0">继电器1</span>
            <span v-if="index2===1">继电器2</span>
            <span v-if="index2===2">继电器3</span>
            <span v-if="index2===3">继电器4</span>
            <span v-for="(j,inde2) in relayArr" :key="inde2">
                <el-checkbox v-model="relayArr[index2][inde2]" class="check" true-label="1" false-label="0" @change="flatArr"></el-checkbox>
            </span>
        </div>
    </div>
</div>
</template>

<script>
import Light from './light.vue'
export default {
  components:{
    Light,
  },
  props:{
    config:{
      type:Object,
      required:true
    }
  },
  data(){
      return {
          active:false,
          switchModel:1,
          delay:10,
          switchDict:[
            {
                value: 0,
                label: '禁用'
            },
            {
                value: 1,
                label: '翻转'
            },
            {
                value: 2,
                label: '关'
            },
            {
                value: 3,
                label: '开'
            },
            {
                value: 4,
                label: '点动'
            },
            {
                value: 5,
                label: '延时关'
            },
          ],
          codeArr:[1,2,3,4,5,6,7,8],
          mode:1,
          relateCode:1,
          lightArr:[],
          ledArr:[0,0,0,0,0,0,0,0],
          relayArr:[],
          checked: true,
      }
  },
  watch:{
      config:{
          handler(val){
              this.lightArr = val.lightArr.map(item=>{
                  let temp = item.toString(2);
                  return this.preZero(temp).split("").reverse();
              })
              this.ledArr = val.ledArr.map(item=>{
                  let temp = item.toString(2);
                  return this.preZero(temp).split("").reverse();
              })
              this.relayArr = val.relayArr.map(item=>{
                  let temp = item.toString(2);
                  return this.preZero4Bit(temp).split("").reverse();
              })
          },
          deep:true,
          immediate:true
      }
  },
  methods:{
      preZero(val){
        let arr = []
        for(let i=0;i<8-val.length;i++){
            arr.push(0);
        }
        return arr.join("")+val
      },
      preZero4Bit(val){
        let arr = []
        for(let i=0;i<4-val.length;i++){
            arr.push(0);
        }
        return arr.join("")+val
      },
      toggleLight(){
        this.flatArr();
      },
      flatArr(){
          this.config.lightArr = this.lightArr.map(item=>parseInt(item.reverse().join(""),2));
          this.config.ledArr = this.ledArr.map(item=>parseInt(item.reverse().join(""),2));
          this.config.relayArr = this.relayArr.map(item=>parseInt(item.reverse().join(""),2));
      }
  }
}
</script>

<style lang="scss" scoped>
.config{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 1rem;
    grid-column-gap: 1rem;
    .item{
        .header{
            background:#856FFA;
            padding:.5rem;
            color:white;
        }
        .mid{
            padding:0 .5rem;
            margin-top:.5rem;
        }
        .input-wrap{
            display: flex;
            align-items: center;
            label{
                margin:0 .5rem;
            }
            .input-item{
                max-width:100px;
            }
        }
        .bot{
            padding:.5rem;
            padding-top:.2rem;
            margin-top:.5rem;
        }
    }
}
.two{
    display: flex;
    margin-top:1rem;
    border-right:1px solid rgba(0, 0, 0, .04);
    border-top:1px solid rgba(0, 0, 0, .04);
    .column{
        flex:1;
    }
    .header{
        span{
            background:#F1F4FF;
        }
    }
    span{
        padding:.5rem 0;
        flex:1;
        text-align: center;
        border-left:1px solid rgba(0, 0, 0, .04);
        border-bottom:1px solid rgba(0, 0, 0, .04);
        &:first-child{
          background:#F1F4FF;
        }
        .check{
          transform: scale(1.2);
        }
    }
}
</style>